<script setup>
import successImage from './images/success.svg'
import failImage from './images/fail.svg'
import ButtonX from '@/components/button-x/index.vue'
import {computed} from 'vue'
import {useSys} from '@/hooks/useSys'

const props = defineProps({
  type: {
    type: String,
    default: 'success', // success-成功 fail-失败
  },
  message: String,
  subtext: String,
  buttonText: String,
})

const emit = defineEmits(['btnClick'])

const icon = computed(() => props.type === 'success' ? successImage : failImage)

const { safeArea } = useSys()

const btnClick = () => {
  emit('btnClick')
}

</script>

<template>
  <view class="result-container" :style="{ paddingTop: `${safeArea.top}px` }">
    <view class="result-icon-container">
      <image :src="icon"></image>
    </view>
    <view class="result-text-container">
      <text>{{ props.message }}</text>
    </view>
    <view class="result-subtext-container" v-if="props.subtext">
      <text>{{ props.subtext }}</text>
    </view>
    <view class="result-button-container">
      <button-x type="primary" @click="btnClick">{{ props.buttonText }}</button-x>
    </view>
    <view class="result-slot-container">
      <slot></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.result-icon-container {
  padding-top: 164rpx;
  image {
    width: 300rpx;
    height: 300rpx;
  }
}
.result-text-container {
  padding: 32rpx;
  color: $kaoyan-color-9;
  text-align: center;
  font-size: 48rpx;
  font-style: normal;
  font-weight: 600;
  line-height: 68rpx;
}
.result-subtext-container {
  @include fs32w400($kaoyan-color-10)
}
.result-button-container {
  box-sizing: border-box;
  width: 100%;
  padding: 96rpx 48rpx 0;
}
.result-slot-container {
  padding-top: 32rpx;
}
</style>
